<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点我</button>

    <ul id="ul1">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>

    <script>
        // 闭包(closure)：在表现形式上，就是外部函数内部声明内部函数
        // 内部函数中引用了外部函数中的局部变量，当外部函数调用完毕之后，
        // 局部变量不释放
        // function test() {
        //     var a = 5;
        //     function fn() {
        //         return a + 6;
        //     }
        //     return fn;
        // }

        // var fn2 = test();

        // console.log(fn2());

        // var oBtn = document.getElementById('btn');
        // oBtn.onclick = function(){
        //     var a = 'haha';
        //     setTimeout(function(){
        //         console.log(a);
        //     }, 2000);
        // };

        var aLi = document.getElementsByTagName('li');
        // for (var i = 0; i < aLi.length; i++) {
        //     (function (index) { 
        //         aLi[i].onclick = function () {
        //             console.log(index);
        //         };
        //     })(i);
        // }

        for (var i = 0; i < aLi.length; i++) {
            aLi[i].onclick = function () {
                var index = i;
                (function () {
                    console.log(index);
                })();
            };
        }

    </script>
</body>

</html>